<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>studentInformation</title>
    <link rel="stylesheet" th:href="@{/styles.css}" />
    <style>
      html{
        width: 100%;
        height: 100%;
        font-style: sans-serif;
      }
      body{
        width: 100%;
        height: 100%;
        font-family: 'Open Sans',sans-serif;
        margin: 0;
        background-color: #dfdfdf;
      }
      .information{
        position: absolute;
        top:50%;
        left:50%;
        margin: -500px 0 0 -400px;
        width: 800px;
        height: 1000px;
        background-color: white;
        border-radius: 10px;
        box-shadow: #56536A ;
        border-radius: 10px;
      }
      .in{
        width: 500px;
        height: 700px;
        position: absolute;
        top: 52%;
        left: 50%;
        margin-top: -250px;
        margin-left: -250px;
      }
      .Re{
        color: #b09f7a;
        text-shadow:0 0 10px;
        letter-spacing: 1px;
        text-align: center;
        position: absolute;
        top: 14%;
        left: 25%;
      }
      .la{
        color: #959695;
        font-size: 14px;
      }
      .lb{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        width: 475px;
        height: 20px;
        margin-bottom: 10px;
        outline: none;
        padding: 10px;
        font-size: 14px;
        text-shadow:1px 1px 1px;
        border-top: 1px solid #312E3D;
        border-left: 1px solid #312E3D;
        border-right: 1px solid #312E3D;
        border-bottom: 1px solid #56536A;
        border-radius: 4px;
        background-color: #fbfbfb;
      }
      .validationError{
        color: red;
        font-size: 14px;
        display: flex;
        margin-top: 1px;
      }
      .but{
        position: absolute;
        bottom: 22%;
        left:40%;
        width: 100px;
        height: 30px;

        text-align: center;
        line-height: 1px;
        background-color: #fbfbfb;
        border: 1px solid #312E3D;
        color: #656464;
        padding: 9px 14px;
        font-size: 16px;
        box-shadow: #656464;
        line-height: normal;
        border-radius: 15px;
        margin: 0;
      }
      .lo{
        width: 210px;
        height: 25px;
        position: absolute;
        top: 0;
        right: 0;
      }
      .ls{
        border: none;
        background-color:  #dfdfdf;
        position: absolute;
        right: 0;
        top: 5px;
      }
      .ll{
        color: darkred;
        margin-top:4px ;
      }
    </style>
  </head>

  <body>

    <form method="POST" th:action="@{/studentInformation}" th:object="${student}" id="studentInformation">



      <div class="information">
        <h1 class="Re">Completer Information</h1>

      <div class="in">
        <label for="name" class="la">Name: </label></br>
        <input type="text" th:field="*{name}" class="lb"/>
        <span class="validationError"
            th:if="${#fields.hasErrors('name')}"
            th:errors="*{name}" >Name Error</span>
        <br/>

        <label for="studentNumber" class="la">Student Number: </label></br>
        <input type="text" th:field="*{studentNumber}" class="lb"/>
        <span class="validationError"
            th:if="${#fields.hasErrors('studentNumber')}"
            th:errors="*{studentNumber}" >Student Number Error</span>
        <br/>

        <label for="grade" class="la">Grade: </label></br>
        <input type="text" th:field="*{grade}" class="lb"/>
        <span class="validationError"
            th:if="${#fields.hasErrors('grade')}"
            th:errors="*{grade}" >Grade Error</span>
        <br/>

        <label for="major" class="la">Major: </label></br>
        <input type="text" th:field="*{major}" class="lb"/>
        <span class="validationError"
            th:if="${#fields.hasErrors('major')}"
            th:errors="*{major}" >Major Error</span>
        <br/>

        <label for="college" class="la">College: </label></br>
        <input type="text" th:field="*{college}" class="lb"/>
        <span class="validationError"
            th:if="${#fields.hasErrors('college')}"
            th:errors="*{college}" >College Error</span>
        <br/>

        <input type="submit" value="Submit" class="but"/>
      </div>

      </div>
    </form>

  <form method="POST" th:action="@{/logout}" id="logoutForm">
    <div class="lo">
      <label class="ll">Wellcome</label>
      <label th:if="${!user.fullname.isEmpty()}" th:text="${user.fullname}" class="ll"/>
      <input type="submit" value="Logout" class="ls"/>
    </div>
  </form>
  </body>
</html>
